<template>
  <!-- 地区任务分发弹窗 -->
  <el-dialog
    title="地区任务分发"
    width="420px"
    :visible.sync="showTask"
    :close-on-click-modal="false"
    @close="handleClose"
    :modal-append-to-body="false"
  >
    <el-form class="tipDialog">
      <el-form-item label="区域" label-width="60px" v-if="isEzs">
        <el-cascader
          style="width: 340px"
          ref="manageArea"
          v-model="taskAreaId"
          :options="areasOptions"
          @change="getTaskAreaId"
          popper-class="cascaderStyle"
          clearable
          filterable
          :props="{ checkStrictly: true, emitPath: false }"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="区域" label-width="60px" v-else>
        <el-cascader
          style="width: 340px"
          ref="manageArea"
          v-model="taskAreaId"
          :options="areasOptions"
          @change="getTaskAreaId"
          clearable
          filterable
          :props="{ checkStrictly: true, emitPath: false }"
        ></el-cascader>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button class="cancel" @click="handleClose" v-sdc>取消</el-button>
      <el-button
        type="primary"
        class="save"
        :loading="taskLoading"
        @click="submit"
        v-sdc
        >确定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import { mapActions, mapState } from 'vuex'

export default {
  data() {
    return {
      taskAreaId: [],
      taskAreaIds: '',
      taskLoading: false,
      showTask: false,
      id: '',
      areaName: '',
      cityId: '',
      cityName: '',
      countyId: '',
      countyName: '',
      streetId: '',
      streetName: '',
      isEzs: false,
    }
  },
  props: {
    showTaskProp: {
      type: Boolean,
      default: false,
    },
    ids: {
      type: Array,
      default() {
        return []
      },
    },
    childData: {
      type: Object,
      required: true,
      default() {
        return {}
      },
    },
  },
  computed: { ...mapState(['areasOptions']) },
  watch: {
    showTaskProp(val) {
      this.showTask = val
      if (val) {
        if (this.ids.length == 0) {
          const {
            areaId,
            areaName,
            cityId,
            cityName,
            countyId,
            countyName,
            streetId,
            streetName,
            id,
          } = this.childData
          this.id = id
          this.taskAreaIds = areaId
          this.taskAreaId = areaId
          this.areaName = areaName
          this.cityId = cityId
          this.cityName = cityName
          this.countyId = countyId
          this.countyName = countyName
          this.streetId = streetId
          this.streetName = streetName
        }
      }
    },
  },
  mounted() {
    var currentAreaId = this.$store.state.currentAreaId
    if (currentAreaId) {
      if (currentAreaId === '4207' || currentAreaId.indexOf('4207') > -1) {
        this.isEzs = true
      } else {
        this.isEzs = false
      }
    }
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
  },
  methods: {
    ...mapActions(['getAreas']),
    getTaskAreaId() {
      let result = this.$refs.manageArea.getCheckedNodes()[0]
      if (this.taskAreaId.length) {
        const { path, pathLabels } = result
        this.taskAreaIds = path[path.length - 1]
        this.areaName = pathLabels[pathLabels.length - 1]
        this.cityId = ''
        this.cityName = ''
        this.countyId = ''
        this.countyName = ''
        this.streetId = ''
        this.streetName = ''
        this.taskAreaId.forEach((element, index) => {
          if (element.length == 4) {
            this.cityId = element
            this.cityName = pathLabels[index]
          }
          if (element.length == 6) {
            this.countyId = element
            this.countyName = pathLabels[index]
          }
          if (element.length >= 9) {
            this.streetId = element
            this.streetName = pathLabels[index]
          }
        })
      } else {
        this.taskAreaIds = ''
        this.areaName = ''
        this.cityId = ''
        this.cityName = ''
        this.countyId = ''
        this.countyName = ''
        this.streetId = ''
        this.streetName = ''
      }
    },
    handleClose(index) {
      if (this.showTask) {
        this.showTask = false
      }
      this.$emit('callback', { success: index == 1 ? true : false })
    },
    submit() {
      let that = this
      if (this.taskAreaIds) {
        this.isLoading = true
        const {
          taskAreaIds,
          areaName,
          cityId,
          cityName,
          countyId,
          countyName,
          streetId,
          streetName,
          id,
        } = this
        let params = {}
        if (that.ids.length) {
          params = {
            areaId: taskAreaIds,
            areaName,
            cityId,
            cityName,
            countyId,
            countyName,
            streetId,
            streetName,
            id: this.ids.join(','),
          }
        } else {
          params = {
            areaId: taskAreaIds,
            areaName,
            cityId,
            cityName,
            countyId,
            countyName,
            streetId,
            streetName,
            id,
          }
        }

        this.axios
          .post('api-r/rightbackpay/expand/edit', params)
          .then((res) => {
            if (!res.data.hasError) {
              this.$message({
                type: 'success',
                message: res.data.msg,
              })
              this.isLoading = false
              this.handleClose(1)
            } else {
              this.$message({
                type: 'warning',
                message: res.data.errorMsg,
              })
              this.isLoading = false
            }
          })
      } else {
        this.$message({
          type: 'warning',
          message: '请选择区域',
        })
      }
    },
  },
}
</script>
<style lang="less">
.cascaderStyle {
  .el-cascader-menu:nth-of-type(1) .el-radio__inner {
    display: none !important;
  }
}
</style>
